<template>
  <div class="app-container">


    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <span>


        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="增值保障" prop="safeguardTypeId">
        <el-select v-model="queryParams.safeguardTypeId" placeholder="请选择增值保障">
          <el-option v-for="item in safeguardTypeList" :key="item.safeguardTypeId" :label="item.safeguardTypeName"
                     :value="item.safeguardTypeId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>





    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="细分商品主键"  align="center" prop="skuId" />
      <el-table-column label="商品"  align="center" prop="goodsName" />
      <el-table-column label="供应商"  align="center" prop="supplierName" />
      <el-table-column label="商品标题"  align="center" prop="skuTitle" width="200px" :formatter="formatStr" />
      <el-table-column label="原价(市场标价格)"  align="center" prop="skuPrice" />
      <el-table-column label="上架状态"  align="center" prop="skuState" >
      <template slot-scope="scope">
        <el-tag v-if="scope.row.skuState==0" type="danger">未上架</el-tag>
        <el-tag v-else-if="scope.row.skuState==1" type="success">上架</el-tag>
        <el-tag v-else type="info">不清楚</el-tag>
      </template>
      </el-table-column>
      <el-table-column label="说明"  align="center" prop="skuInfo" :formatter="formatStr" />
      <el-table-column label="最新修改时间"  align="center" prop="modifiedTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前价格"  align="center" prop="skuNowPrice" />
      <el-table-column label="增值保障集合"  align="center" prop="safeguardTypeIds" />

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />




      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSelectSku" >确 定</el-button>
  </span>
    </el-dialog>









  </div>
</template>

<script>
import { listGoodsSkuInfo, getGoodsSkuInfo, updateGoodsSkuInfo, addGoodsSkuInfo, delGoodsSkuInfo } from "@/api/webshop/GoodsSkuInfo";
import {listGoods} from "@/api/webshop/GoodsSpuInfo"
import {listSupplier} from "@/api/webshop/SupplierInfo"
import {listSafeguardType} from "@/api/webshop/SafeguardType"

export default {
  name: "GoodsSkuInfo",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,

      // 控制对话窗的 显隐
      dialogVisible:true,


      // 商品细分表格数据
      dataList: [],
      safeguardTypeList:[],


      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierId:null,
        safeguardTypeId:undefined,
        safeguardTypeIdss:[],
        selectedIds:null
      },
      // 表单参数
      form: {},
      title:""
    };
  },
  created() {
    // this.getList();
    this.getSafeguardTypeList();
  },
  methods: {
    onSelectSku(){
      console.log(this.ids)
      this.$emit("onSelectSku",this.ids)
      this.dialogVisible=false

    }
    ,
    init(val,title,ids){
      console.log("aasdasdasd",ids)
      this.queryParams.supplierId=val;

      this.queryParams.selectedIds=ids;
      this.dialogVisible=true
      this.title = title
      // this.getList();

      this.$nextTick(() => {
        // 这里可以安全地访问和操作基于新数据渲染的 DOM
        this.getList();

      });
    }
    ,
    /** 查询商品细分列表 */
    getList() {
      this.loading = true;
      listGoodsSkuInfo(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getSafeguardTypeList() {
      this.loading = true;
      listSafeguardType(this.queryParams).then(response => {
        this.safeguardTypeList = response;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        skuId: undefined,
        goodsId: undefined,
        supplierId: undefined,
        skuTitle: undefined,
        skuPrice: undefined,
        skuState: undefined,
        skuInfo: undefined,
        modifiedTime: undefined,
        skuNowPrice: undefined,
        safeguardTypeIds: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.queryParams.safeguardTypeId)
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.nums = []
      this.StartDate = []
      this.queryParams.brandCnName = ''
      this.queryParams.brandEnName = ''
      this.queryParams.brandNums = null
      this.queryParams.brandFoundedFrom = null
      this.queryParams.brandFoundedTo = null
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 说明的字符串截取  */
    formatStr(row, column, cellValve, index) {
      // console.log(row, column,cellValve,index)
      return cellValve.length > 10 ? cellValve.substr(0, 10) + "..." : cellValve
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection
      // this.single = selection.length!=1
      // this.multiple = !selection.length
    }
  }
};
</script>
